<template>
  <div class="apartStorehouse">
      <div class="headCrm mlcbg">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">仓库选择</span>
          <button class="submit-follow" @click="submitApply">提交</button>
        </p>          
      </div>
      <div class="contentCrm">
          <ul class="torehouseList" v-for="(item, index) in torehouseList" :key="index">
              <li :class="item.colorLiIsActive? 'colorLi':''" @click="colorLiIsActiveBut(index)">
                  <span>{{item.code}}</span>
                  <span class="f_fr">{{item.name}}</span>
              </li>              
          </ul>
      </div>

      <div class="footCrm">
      </div>
  </div>
</template>

<script>
    //import Footer from '../components/Footer.vue';//引入组件
    export default {
        name: 'partApplyBut',
            // components: {delivery
            //     Footer
            // },
        data() {
            return {
                torehouseList:[
                    {
                        colorLiIsActive:false,
                        code:'001',
                        name: '总仓',
                    },
                    {
                        colorLiIsActive:false,
                        code:'002',
                        name: '维修员仓',
                    },
                    {
                        colorLiIsActive:false,
                        code:'003',
                        name: '返厂仓',
                    }

                ],
                selected: '',
            }
        },
        mounted: function(){
        },
        methods: {
            returnPage:function(){
                this.$router.push({
                    path:'/partApplyBut'
                })           
            },
            submitApply:function(){
                this.$router.push({
                    path:'/partApplyBut'
                })            
            },
            colorLiIsActiveBut:function(index){
                this.torehouseList.forEach(item => {
                    item.colorLiIsActive = false;
                });
                this.torehouseList[index].colorLiIsActive=true;
                }
        },
    }
</script>

<style scoped>
/* headCrm */
  .headCrm{
    width:100%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
    position:absolute;
    left: 0.3rem;
    top:0.2rem;
    font-size: 0.6rem;
  }
  .submit-follow{
    width: 1rem;
    position:absolute;
    right: 0.3rem;
    top:0.25rem;
    background-color: #ff5000;
    line-height:0.5rem;
    text-align:center;
    color:#fff;
    border: 0.01rem solid #ffffff;
    border-radius:0.33rem;
    box-shadow:0.05rem 0.05rem 0.1rem #646464;
  }

/* .contentCrm */
  .contentCrm{
    width: 90%;
    margin-left: 5%;
    color: #646464;
  }
  .contentCrm ul li{
    /* display:inline-block; */
    padding-top: 0.44rem;
    font-size: 0.33rem;
  }
  .el-form-item{
      margin: 0;
  }
  .but-switcha{
    position:absolute;
    top:25.5%;
    right: 5%;
  }
  .but-switchb{
    position:absolute;
    top:31%;
    right: 5%;
  }
  .el-textarea__innera{
      line-height:11rem;
  }
  .selectScheme{
    border:none;
    float: right;
    font-size:0.33rem;
    color: #646464;
  }
  .selectScheme option{
    font-size:0.25rem;
    /* border:none; */
  }
  .applyList li input{
    float: right;
    border:none;
    text-align:right;
    width: 2rem;
    color: #646464;
  }
  .colorLi{
      color: #ff5000;
  }


</style>
